<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
/*
  Copyright (c) 2012 Julian Garnier
  Licensed under the MIT license
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
* { -moz-box-sizing: border-box; box-sizing: border-box; box-sizing: border-box; }
body { font-size: 10px; font-family: 'Open Sans', sans-serif; font-weight: 300; background-color: #08090A; }
#universe { z-index: 1; position: absolute; overflow: hidden; width: 100%; height: 100%; background-position: center 40%; background-repeat: no-repeat; background-size: cover; }
#galaxy { position: relative; width: 100%; height: 100%;/*perspective: 4000;*/ }
#solar-system { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; }
.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; transform-style: preserve-3d; animation-name: orbit; animation-iteration-count: infinite; animation-timing-function: linear; }
.orbit .orbit { animation-name: suborbit; }
.pos { position: absolute; top: 50%; width: 2em; height: 2em; margin-top: -1em; margin-left: -1em; transform-style: preserve-3d; animation-name: invert; animation-iteration-count: infinite; animation-timing-function: linear; }
#sun, .planet, #earth .moon { position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin-top: -0.5em; margin-left: -0.5em; border-radius: 50%; transform-style: preserve-3d; }
#sun { background-color: #FB7209; background-repeat: no-repeat; background-size: cover; box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); }
.planet { background-color: #202020; background-repeat: no-repeat; background-size: cover; animation-iteration-count: infinite; animation-timing-function: linear; }
.ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; }
#saturn .ring { width: 2em; height: 2em; margin-top: -1em; margin-left: -1em; border: 0.3em solid rgba(160, 147, 130, 0.7); animation-iteration-count: infinite; animation-timing-function: linear; }
#saturn .ring:after { border-radius: 50%; position: absolute; content: ''; top: 50%; left: 50%; width: 2.2em; height: 2.2em; margin-top: -1.1em; margin-left: -1.1em; border: 0.07em solid rgba(160, 147, 130, 0.5); box-sizing: border-box; box-sizing: border-box; }
/* --------------------------------------------------------------------------- planets index */
#mercury { z-index: 10; }
#venus { z-index: 9; }
#earth { z-index: 8; }
#moon { z-index: 7; }
#mars { z-index: 6; }
#jupiter { z-index: 5; }
#saturn { z-index: 4; }
#uranus { z-index: 3; }
#neptune { z-index: 2; }
#sun { z-index: 1; }

/* --------------------------------------------------------------------------- animations */
@keyframes orbit {
 0% {
 transform: rotateZ(0deg);
}
 100% {
 transform: rotateZ(-360deg);
}
}
 @keyframes suborbit {
 0% {
 transform: rotateX(90deg) rotateZ(0deg);
}
 100% {
 transform: rotateX(90deg) rotateZ(-360deg);
}
}
 @keyframes invert {
 0% {
 transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg);
}
 100% {
 transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
}
/* --------------------------------------------------------------------------- opening */
.view-3D .opening #sun, .view-3D .opening .orbit, .view-3D .opening .pos, .view-3D .opening .planet, .view-3D .opening .satelite, .view-3D .opening .ring { transition-duration: 4s; }
#universe.opening #sun { box-shadow: 0 0 0 rgba(255, 160, 60, 0); }
/* --------------------------------------------------------------------------- 2D view */
.view-2D.zoom-large #sun { transform-style: flat; }
.view-2D.zoom-large .orbit { transform-style: flat; }
.view-2D #sun, .view-2D .ring { transform: rotateX(0deg); }
.view-2D .planet, .view-2D .moon { transform: rotateX(90deg); }
/* --------------------------------------------------------------------------- 3D view */
.view-3D.zoom-large #sun { transform-style: preserve-3d; }
.view-3D.zoom-large .orbit { transform-style: preserve-3d; }
.view-3D #solar-system { transform: rotateX(75deg); }
.view-3D #sun { transform: rotateX(-90deg); }
.view-3D .ring { transform: rotateX(90deg); }
.view-3D .planet, .view-3D .moon { transform: rotateX(0deg); }
/* --------------------------------------------------------------------------- large zoom */
.zoom-large #solar-system { width: 100%; }
.zoom-large.view-2D .scale-stretched #solar-system { font-size: 26%; }
.zoom-large.view-3D .scale-stretched #solar-system { font-size: 62%; }
.zoom-large.view-2D .scale-d #solar-system { font-size: 22%; }
.zoom-large.view-3D .scale-d #solar-system { font-size: 48%; }
.zoom-large.view-2D .scale-s #solar-system { font-size: 7%; }
.zoom-large.view-3D .scale-s #solar-system { font-size: 14%; }
/* --------------------------------------------------------------------------- close zoom */
.zoom-close #solar-system { width: 200%; font-size: 100%; }
.zoom-close .scale-stretched #solar-system { margin-left: -100%; }
.zoom-close .scale-d #solar-system { margin-left: -106%; }
.zoom-close.view-2D .scale-d #solar-system { font-size: 84%; }
.zoom-close.view-3D .scale-d #solar-system { font-size: 84%; }
.zoom-close .scale-s #solar-system { margin-left: -145%; }
.zoom-close.view-2D .scale-s #solar-system { font-size: 40%; }
.zoom-close.view-3D .scale-s #solar-system { font-size: 40%; }
.zoom-close .orbit, .zoom-close .pos, .zoom-close .planet, .zoom-close .satelite, .zoom-close .ring { animation-play-state: paused!important; animation-duration: 0s!important; animation: none!important; }
.zoom-close.view-2D .planet, .zoom-close.view-2D .moon { transform: rotateX(0deg); }
.zoom-close.view-3D .planet { transform: rotateX(-90deg); }
.zoom-close.view-3D .moon { transform: rotateX(90deg); }
.zoom-close .pos { left: 100%!important; top: 50%!important; }
/* --------------------------------------------------------------------------- data */
/* --------------------------------------------------------------------------- speed */
/* sideral years */
#mercury .pos, #mercury .planet, #mercury.orbit { animation-duration: 2.89016s; }
#venus .pos, #venus .planet, #venus.orbit { animation-duration: 7.38237s; }
#earth .pos, #earth .planet, #earth.orbit { animation-duration: 12.00021s; }
#earth .orbit .pos, #earth .orbit { animation-duration: 0.89764s; }
#mars .pos, #mars .planet, #mars.orbit { animation-duration: 22.57017s; }
#jupiter .pos, #jupiter .planet, #jupiter.orbit { animation-duration: 142.35138s; }
#saturn .pos, #saturn .planet, #saturn.orbit, #saturn .ring { animation-duration: 353.36998s; }
#uranus .pos, #uranus .planet, #uranus.orbit { animation-duration: 1008.20215s; }
#neptune .pos, #neptune .planet, #neptune.orbit { animation-duration: 1977.49584s; }
/* --------------------------------------------------------------------------- planets sizes */
/* --------------------------------------------------------------------------- stretched sizes */
.scale-stretched #sun { font-size: 24em; }
.scale-stretched #mercury .planet { font-size: 1.5em; }
.scale-stretched #venus .planet { font-size: 3.72em; }
.scale-stretched #earth .planet { font-size: 3.92em; }
.scale-stretched #earth .moon { font-size: 1.2em; }
.scale-stretched #mars .planet { font-size: 2.9em; }
.scale-stretched #jupiter .planet { font-size: 12em; }
.scale-stretched #saturn .planet { font-size: 10.8em; }
.scale-stretched #uranus .planet { font-size: 4.68em; }
.scale-stretched #neptune .planet { font-size: 4.9em; }
/* --------------------------------------------------------------------------- scaled sizes */
/*
(planets radius * 2) * ratio
*/
/*$distanceScaleRatio:   0.000075em;*/
/* --------------------------------------------------------------------------- planets distance scale sizes */
.scale-d #sun { font-size: 41.73048em; }
.scale-d #mercury .planet { font-size: 0.14634em; }
.scale-d #venus .planet { font-size: 0.36306em; }
.scale-d #earth .planet { font-size: 0.38226em; }
.scale-d #earth .moon { font-size: 0.08226em; }
.scale-d #mars .planet { font-size: 0.20334em; }
.scale-d #jupiter .planet { font-size: 4.19466em; }
.scale-d #saturn .planet { font-size: 3.49392em; }
.scale-d #uranus .planet { font-size: 1.52172em; }
.scale-d #neptune .planet { font-size: 1.47732em; }
/* --------------------------------------------------------------------------- planet size scale sizes */
.scale-s #sun { font-size: 417.3048em; }
.scale-s #mercury .planet { font-size: 1.4634em; }
.scale-s #venus .planet { font-size: 3.6306em; }
.scale-s #earth .planet { font-size: 3.8226em; }
.scale-s #earth .moon { font-size: 0.8226em; }
.scale-s #mars .planet { font-size: 2.0334em; }
.scale-s #jupiter .planet { font-size: 41.9466em; }
.scale-s #saturn .planet { font-size: 34.9392em; }
.scale-s #uranus .planet { font-size: 15.2172em; }
.scale-s #neptune .planet { font-size: 14.7732em; }
/* --------------------------------------------------------------------------- stretched orbits */
.scale-stretched #mercury.orbit { width: 32em; height: 32em; margin-top: -16em; margin-left: -16em; }
.scale-stretched #venus.orbit { width: 40em; height: 40em; margin-top: -20em; margin-left: -20em; }
.scale-stretched #earth.orbit { width: 56em; height: 56em; margin-top: -28em; margin-left: -28em; }
.scale-stretched #earth .orbit { width: 6em; height: 6em; margin-top: -3em; margin-left: -3em; }
.scale-stretched #mars.orbit { width: 72em; height: 72em; margin-top: -36em; margin-left: -36em; }
.scale-stretched #jupiter.orbit { width: 100em; height: 100em; margin-top: -50em; margin-left: -50em; }
.scale-stretched #saturn.orbit { width: 150em; height: 150em; margin-top: -75em; margin-left: -75em; }
.scale-stretched #uranus.orbit { width: 186em; height: 186em; margin-top: -93em; margin-left: -93em; }
.scale-stretched #neptune.orbit { width: 210em; height: 210em; margin-top: -105em; margin-left: -105em; }
/* --------------------------------------------------------------------------- scaled orbits */
/* --------------------------------------------------------------------------- distance scale orbits */
.scale-d #mercury.orbit { width: 44.74176em; height: 44.74176em; margin-top: -22.37088em; margin-left: -22.37088em; }
.scale-d #venus.orbit { width: 47.35737em; height: 47.35737em; margin-top: -23.67869em; margin-left: -23.67869em; }
.scale-d #earth.orbit { width: 49.50959em; height: 49.50959em; margin-top: -24.75479em; margin-left: -24.75479em; }
.scale-d #mars.orbit { width: 53.58356em; height: 53.58356em; margin-top: -26.79178em; margin-left: -26.79178em; }
.scale-d #jupiter.orbit { width: 82.2042em; height: 82.2042em; margin-top: -41.1021em; margin-left: -41.1021em; }
.scale-d #saturn.orbit { width: 115.91713em; height: 115.91713em; margin-top: -57.95857em; margin-left: -57.95857em; }
.scale-d #uranus.orbit { width: 191.00471em; height: 191.00471em; margin-top: -95.50235em; margin-left: -95.50235em; }
.scale-d #neptune.orbit { width: 275.64709em; height: 275.64709em; margin-top: -137.82355em; margin-left: -137.82355em; }
/* Moon */
.scale-d #earth .orbit { width: 1em; height: 1em; margin-top: -0.5em; margin-left: -0.5em; }
/* --------------------------------------------------------------------------- size scale orbits */
.scale-s #mercury.orbit { width: 441.3048em; height: 441.3048em; margin-top: -220.6524em; margin-left: -220.6524em; }
.scale-s #venus.orbit { width: 457.3048em; height: 457.3048em; margin-top: -228.6524em; margin-left: -228.6524em; }
.scale-s #earth.orbit { width: 473.3048em; height: 473.3048em; margin-top: -236.6524em; margin-left: -236.6524em; }
.scale-s #mars.orbit { width: 489.3048em; height: 489.3048em; margin-top: -244.6524em; margin-left: -244.6524em; }
.scale-s #jupiter.orbit { width: 561.3048em; height: 561.3048em; margin-top: -280.6524em; margin-left: -280.6524em; }
.scale-s #saturn.orbit { width: 705.3048em; height: 705.3048em; margin-top: -352.6524em; margin-left: -352.6524em; }
.scale-s #uranus.orbit { width: 817.3048em; height: 817.3048em; margin-top: -408.6524em; margin-left: -408.6524em; }
.scale-s #neptune.orbit { width: 881.3048em; height: 881.3048em; margin-top: -440.6524em; margin-left: -440.6524em; }
/* Moon */
.scale-s #earth .orbit { width: 1em; height: 1em; margin-top: -0.5em; margin-left: -0.5em; }
/* --------------------------------------------------------------------------- text infos data */
/* --------------------------------------------------------------------------- speed */
.set-speed dl.infos dd span:after { content: 'Orbit Velocity'; }
.set-speed #sun dl.infos dd:after { content: '0 km/h'; }
.set-speed #mercury dl.infos dd:after { content: '170,503 km/h'; }
.set-speed #venus dl.infos dd:after { content: '126,074 km/h'; }
.set-speed #earth dl.infos dd:after { content: '107,218 km/h'; }
.set-speed #mars dl.infos dd:after { content: '86,677 km/h'; }
.set-speed #jupiter dl.infos dd:after { content: '47,002 km/h'; }
.set-speed #saturn dl.infos dd:after { content: '34,701 km/h'; }
.set-speed #uranus dl.infos dd:after { content: '24,477 km/h'; }
.set-speed #neptune dl.infos dd:after { content: '19,566 km/h'; }
/* --------------------------------------------------------------------------- size */
.set-size dl.infos dd span:after { content: 'Equatorial Circumference'; }
.set-size #sun dl.infos dd:after { content: '4,370,005 km'; }
.set-size #mercury dl.infos dd:after { content: '15,329 km'; }
.set-size #venus dl.infos dd:after { content: '38,024 km'; }
.set-size #earth dl.infos dd:after { content: '40,030 km'; }
.set-size #mars dl.infos dd:after { content: '21,296 km'; }
.set-size #jupiter dl.infos dd:after { content: '439,263 km'; }
.set-size #saturn dl.infos dd:after { content: '365,882 km'; }
.set-size #uranus dl.infos dd:after { content: '159,354 km'; }
.set-size #neptune dl.infos dd:after { content: '154,704 km'; }
/* --------------------------------------------------------------------------- distance */
.set-distance dl.infos dd span:after { content: 'From Sun'; }
.set-distance #sun dl.infos dd span:after { content: 'From Earth'; }
.set-distance #sun dl.infos dd:after { content: '149,598,262 km'; }
.set-distance #mercury dl.infos dd:after { content: '57,909,227 km'; }
.set-distance #venus dl.infos dd:after { content: '108,209,475 km'; }
.set-distance #earth dl.infos dd:after { content: '149,598,262 km'; }
.set-distance #mars dl.infos dd:after { content: '227,943,824 km'; }
.set-distance #jupiter dl.infos dd:after { content: '778,340,821 km'; }
.set-distance #saturn dl.infos dd:after { content: '1,426,666,422 km'; }
.set-distance #uranus dl.infos dd:after { content: '2,870,658,186 km'; }
.set-distance #neptune dl.infos dd:after { content: '4,498,396,441 km'; }
/* --------------------------------------------------------------------------- planets starting position and lighting effect */
/* --------------------------------------------------------------------------- mercury ; pos: Top */
#mercury .pos { left: 50%; top: -1%; }
#mercury .planet { animation-name: shadow-mercury; }
 @keyframes shadow-mercury {
 0% {
 box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
/* TOP */ }
 25% {
 box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
/* LEFT */ }
 50% {
 box-shadow: inset 13px -5px 4px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 50.01% {
 box-shadow: inset -13px -5px 4px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 75% {
 box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
 100% {
 box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
/* TOP */ }
}
.scaled.view-2D #mercury .planet, .scaled.view-3D #mercury .planet { box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);/* RIGHT */ }
/* --------------------------------------------------------------------------- venus ; pos: Left */
#venus .pos { left: 0; top: 50%; }
#venus .planet { animation-name: shadow-venus; }
 @keyframes shadow-venus {
 0% {
 box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
/* LEFT */ }
 25% {
 box-shadow: inset 22px -20px 10px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 25.5% {
 box-shadow: inset -22px -20px 10px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 50% {
 box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
 75% {
 box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
/* TOP */ }
 100% {
 box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
/* LEFT */ }
}
.scaled.view-2D #venus .planet, .scaled.view-3D #venus .planet { box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);/* RIGHT */ }
/* --------------------------------------------------------------------------- earth ; pos: Right */
#earth .pos { left: 100%; top: 50%; }
#earth .planet { animation-name: shadow-earth; }
 @keyframes shadow-earth {
 0% {
 box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
 25% {
 box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
/* TOP */ }
 50% {
 box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
/* LEFT */ }
 75% {
 box-shadow: inset 24px -20px 15px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 75.01% {
 box-shadow: inset -24px -20px 15px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 100% {
 box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
}
.scaled.view-2D #earth .planet, .scaled.view-3D #earth .planet { box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);/* RIGHT */ }
/* --------------------------------------------------------------------------- moon */
#earth .orbit .pos { left: 100%; top: 50%; }
/* --------------------------------------------------------------------------- mars ; pos: Bottom */
#mars .pos { left: 50%; top: 100%; }
#mars .planet { animation-name: shadow-mars; }
 @keyframes shadow-mars {
 0% {
 box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 25% {
 box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
 50% {
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
/* TOP */ }
 75% {
 box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
/* LEFT */ }
 99.99% {
 box-shadow: inset 18px -10px 10px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 100% {
 box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
}
.scaled.view-2D #mars .planet, .scaled.view-3D #mars .planet { box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);/* RIGHT */ }
/* --------------------------------------------------------------------------- jupiter ; pos: Right */
#jupiter .pos { left: 100%; top: 50%; }
#jupiter .planet { animation-name: shadow-jupiter; }
 @keyframes shadow-jupiter {
 0% {
 box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
 25% {
 box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5);
/* TOP */ }
 50% {
 box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
/* LEFT */ }
 75% {
 box-shadow: inset 94px -30px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 75.01% {
 box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 100% {
 box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
}
.scaled.view-2D #jupiter .planet, .scaled.view-3D #jupiter .planet { box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);/* RIGHT */ }
/* --------------------------------------------------------------------------- saturn ; pos: Left */
#saturn .pos { left: 0%; top: 50%; }
#saturn .planet { animation-name: shadow-saturn; }
 @keyframes shadow-saturn {
 0% {
 box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
/* LEFT */ }
 25% {
 box-shadow: inset 80px -30px 50px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 25.01% {
 box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 50% {
 box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
 75% {
 box-shadow: inset -2px 3px 2px rgba(0, 0, 0, 0.5);
/* TOP */ }
 100% {
 box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
/* LEFT */ }
}
.scaled.view-2D #saturn .planet, .scaled.view-3D #saturn .planet { box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);/* RIGHT */ }
/* --------------------------------------------------------------------------- saturn ring */
/*

#saturn .ring           { animation-name:     shadow-saturn-ring; }

@keyframes 
shadow-saturn-ring{ 0%   { box-shadow: inset -16px  0      4px   rgba(20, 40, 50, 0.45); opacity: .4; }
                  25%    { box-shadow: inset -5px   -30px   12px  rgba(20, 40, 50, 0.3);  opacity: 1; }
                  25.01% { box-shadow: inset 5px    -30px   12px  rgba(20, 40, 50, 0.3);  opacity: 1; }
                  50%    { box-shadow: inset 16px   0      4px   rgba(20, 40, 50, 0.45);  opacity: .4; }
                  75%    { box-shadow: inset 0      30px  50px  rgba(20, 40, 50, 0);  opacity: .3; }
                  100%   { box-shadow: inset -16px  0      4px   rgba(20, 40, 50, 0.45);  opacity: .4; }
                }

.scaled.view-2D #saturn .ring,
.scaled.view-3D #saturn .ring { box-shadow: inset 16px   0      4px   rgba(20, 40, 50, 0.6); }

*/
/* --------------------------------------------------------------------------- uranus ; pos: Left */
#uranus .pos { left: 0; top: 50%; }
#uranus .planet { animation-name: shadow-uranus; }
 @keyframes shadow-uranus {
 0% {
 box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
/* LEFT */ }
 25% {
 box-shadow: inset 40px -15px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 25.01% {
 box-shadow: inset -40px -15px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 50% {
 box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
 75% {
 box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
/* TOP */ }
 100% {
 box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
/* LEFT */ }
}
.scaled.view-2D #uranus .planet, .scaled.view-3D #uranus .planet { box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);/* RIGHT */ }
/* --------------------------------------------------------------------------- neptune ; pos: Top */
#neptune .pos { left: 50%; top: 0; }
#neptune .planet { animation-name: shadow-neptune; }
 @keyframes shadow-neptune {
 0% {
 box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
/* TOP */ }
 25% {
 box-shadow: inset 12px 0 5px rgba(0, 0, 0, 0.5);
/* LEFT */ }
 50% {
 box-shadow: inset 50px -15px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 50.01% {
 box-shadow: inset -50px -15px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
 75% {
 box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
 100% {
 box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
/* TOP */ }
}
.scaled.view-2D #neptune .planet, .scaled.view-3D #neptune .planet { box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);/* RIGHT */ }
/* --------------------------------------------------------------------------- DEBUG 
.pos, 
.planet, 
.orbit,
.ring { animation-duration: 20s!important; }

/* */
/* --------------------------------------------------------------------------- navigation styles */
dl.infos { position: absolute; display: block; opacity: 0; width: 100%; height: 100%; margin-top: -90%; margin-left: 90%; padding-left: 100%; transform-origin: 100% 100%; transform-style: preserve-3d; transform: rotateX(90deg); }
dl.infos:before { position: absolute; content: ''; width: 15px; height: 30px; left: 15px; bottom: 0; border-top: 1px solid white; border-left: 1px solid white; transform-style: preserve-3d; transform: skew(-45deg, 0deg); box-shadow: inset 1px 1px black; }
dl.infos dt { position: absolute; left: 50px; margin-bottom: 26px; bottom: 30px; color: #FFF; font-size: 14px; text-shadow: 1px 1px 2px black; }
dl.infos dd:after { position: absolute; left: 50px; bottom: 30px; width: 300px; color: #FFF; font-size: 22px; text-shadow: 1px 1px 2px black; }
dl.infos dd span:after { position: absolute; left: 50px; bottom: 14px; width: 300px; color: #FFF; font-size: 11px; text-shadow: 1px 1px 2px black; }
.sun #sun .infos, .mercury #mercury .infos, .venus #venus .infos, .earth #earth .infos, .mars #mars .infos, .jupiter #jupiter .infos, .saturn #saturn .infos, .uranus #uranus .infos, .neptune #neptune .infos { display: block; opacity: 1; transform: rotateX(0deg); }
.mercury #mercury.orbit, .venus #venus.orbit, .earth #earth.orbit, .mars #mars.orbit, .jupiter #jupiter.orbit, .saturn #saturn.orbit, .uranus #uranus.orbit, .neptune #neptune.orbit { border: 1px solid rgba(255, 255, 255, 0.8); }
.hide-UI h1, .hide-UI #data, .hide-UI dl.infos, .hide-UI #controls { opacity: 0!important; margin-top: -30px; }
.hide-UI #data { margin-bottom: -30px; }
.hide-UI .orbit { border: 1px solid rgba(255, 255, 255, 0.2) !important; }
h1 { width: 100%; font-weight: 600; font-size: 14px; text-align: center; color: rgba(255, 255, 255, 0.8); }
h1 span, #navbar h1 a { display: inline; position: relative; padding: 0; font-weight: 300; font-size: 14px; text-align: center; color: rgba(255, 255, 255, 0.5); }
}
#navbar, #controls, #data { background: rgba(0, 0, 0, 0.4); }
#navbar { z-index: 99; position: absolute; top: 0; left: 0; padding: 16px; width: 100%; height: 48px; }
#navbar a, #data a, #controls label { color: rgba(255, 255, 255, 0.6); display: block; position: relative; text-decoration: none; }
#navbar a:hover, #data a:hover, #controls label:hover { color: #FFF; }
#data a.active { color: #0CF; }
#navbar a { position: absolute; top: 0; height: 48px; padding: 16px; font-size: 14px; }
#toggle-data { left: 0; }
#toggle-controls { right: 0; }
#data, #controls { z-index: 99; position: fixed; opacity: 1; top: 49px; padding: 16px; }
.data-close #data { left: -100%; }
.data-open #data { left: 0px; }
.controls-close #controls { right: -100%; }
.controls-open #controls { right: 0px; }
#data a { margin-bottom: 1px; padding: 6px 10px; font-size: 18px; }
#controls label { opacity: .6; height: 24px; margin-bottom: 28px; }
#controls label:hover { opacity: 1; }
#controls label:before { position: absolute; display: block; width: 20px; height: 20px; margin-top: 3px; text-align: center; color: #FFF; z-index: 99; }
#controls label span { display: block; margin-left: 36px; padding-top: 4px; font-size: 18px; color: #FFF; }
#controls input { display: block; appearance: none; }
#controls input[type="radio"]:before { content: ''; display: block; position: absolute; width: 22px; height: 22px; border: 2px solid #FFF; border-radius: 16px; }
#controls input:checked[type="radio"]:after { content: ''; display: block; top: 3px; margin-left: 3px; position: absolute; width: 20px; height: 20px; border-radius: 10px; background: #FFF; z-index: 99; }
#controls input[type="checkbox"]:before { content: ''; display: block; position: absolute; width: 100px; height: 22px; border: 2px solid #FFF; border-radius: 16px; }
#controls input[type="checkbox"]:after { content: ''; display: block; top: 3px; position: absolute; width: 20px; height: 20px; border-radius: 10px; background: #FFF; z-index: 99; }
#controls label.set-view:before { font: bold small-caps 11px/20px sans-serif; }
.view-3D #controls label.set-view:before { content: '2D'; margin-left: 82px; }
.view-2D #controls label.set-view:before { content: '3D'; margin-left: 7px; }
.view-3D #controls .set-view input:after { margin-left: 3px; }
.view-2D #controls .set-view input:after { margin-left: 81px; }
#controls label.set-zoom:before { font: normal small-caps 18px/14px sans-serif; }
.zoom-large #controls label.set-zoom:before { content: '+'; margin-left: 82px; }
.zoom-close #controls label.set-zoom:before { content: '-'; margin-left: 7px; }
.zoom-large #controls .set-zoom input:after { margin-left: 3px; }
.zoom-close #controls .set-zoom input:after { margin-left: 81px; }
/* --------------------------------------------------------------------------- transitions */
.pos { transition-property: top, left; }
#solar-system, .orbit, .planet, .satelite, .ring { transition-property: width, height, top, left, margin-left, margin-top, webkit-transform; }
#sun, .icon { transition-property: width, height, webkit-transform; }
#solar-system, #sun, .orbit, .pos, .planet, .satelite, .ring, .infos, .icon { transition-duration: .8s; transition-timing-function: ease-in-out; }
#solar-system, #sun, .planet, .satelite, .ring { transition-delay: 0s; }
.pos { transition-delay: 1s; }
.opening #solar-system, .opening #sun, .opening .orbit, .opening .pos, .opening .planet, .opening .satelite, .opening .ring, .opening .infos, .opening h1, .opening #data, .opening dl.infos, .opening #controls { transition-duration: 0s; transition-delay: 0s; }
.opening .pos { transition-delay: 0s; }
h1, #data, #controls { transition-property: opacity, margin; transition-duration: .8s; transition-timing-function: ease-in-out; }
h1 { transition-delay: .35s; }
#data { transition-delay: .7s; }
#controls { transition-delay: 1s; }
/* --------------------------------------------------------------------------- images */
body { background-image: url(http://www.jq22.com/img/css3dty/a2.png); }
#universe { background-image: url(http://www.jq22.com/img/css3dty/a1.png); }
#sun { background-image: url(http://www.jq22.com/img/css3dty/a3.png); }
#mercury .planet { background-image: url(); }
#venus .planet { background-image: url(); }
#earth .planet { background-image: url(); }
#earth .moon { background-color: white; }
#mars .planet { background-image: url(); }
#jupiter .planet { background-image: url(); }
#saturn .planet { background-image: url(); }
#uranus .planet { background-image: url(); }
#neptune .planet { background-image: url(); }

/* --------------------------------------------------------------------------- responsive styles */
@media screen and (max-width: 299px) {
#universe { font-size: 20%; }
}

@media screen and (min-width: 300px) {
#universe { font-size: 24%; }
}

@media screen and (min-width: 500px) {
#universe { font-size: 36%; }
}

@media screen and (min-width: 600px) {
#universe { font-size: 44%; }
}

@media screen and (min-width: 760px) {
#universe { font-size: 58%; }
}

@media screen and (min-width: 1000px) {
#universe { font-size: 73%; }
#navbar, #controls, #data { background: transparent; }
#navbar a { display: none; }
h1 { font-size: 22px; margin-top: 8px; }
#controls { padding-right: 32px; top: 12px; }
#data { position: fixed; top: inherit; bottom: 0; width: 100%; text-align: center; }
#data a { display: inline-block; text-align: center; font-size: 20px; padding: 15px 15px; }
.data-open #data, .data-close #data { left: 0px; }
.controls-open #controls, .controls-close #controls { right: 0px; }
}

@media screen and (min-width: 1300px) {
#universe { font-size: 100%; }
}

@media screen and (min-width: 1600px) {
.zoom-close .scale-d #solar-system { margin-left: -120%; }
}
</style>
 </head>
 <body>
 <body class="opening hide-UI view-2D zoom-large data-close controls-close">
  <div id="navbar">
    <a id="toggle-data" href="#data"><i class="icon-data"></i>Data</a>
    <h1>3D Solar System<br><span>by <a href="https://twitter.com/JulianGarnier" target="_blank">@JulianGarnier</a></span></h1>
    <a id="toggle-controls" href="#controls"><i class="icon-controls"></i>Controls</a>
  </div>
  <div id="data">
    <a class="sun" title="sun" href="#sunspeed">Sun</a>
    <a class="mercury" title="mercury" href="#mercuryspeed">Mercury</a>
    <a class="venus" title="venus" href="#venusspeed">Venus</a>
    <a class="earth active" title="earth" href="#earthspeed">Earth</a>
    <a class="mars" title="mars" href="#marsspeed">Mars</a>
    <a class="jupiter" title="jupiter" href="#jupiterspeed">Jupiter</a>
    <a class="saturn" title="saturn" href="#saturnspeed">Saturn</a>
    <a class="uranus" title="uranus" href="#uranusspeed">Uranus</a>
    <a class="neptune" title="neptune" href="#neptunespeed">Neptune</a>
  </div>
  <div id="controls">
    <label class="set-view">
        <input type="checkbox">
      </label>
    <label class="set-zoom">
        <input type="checkbox">
      </label>
    <label>
        <input type="radio" class="set-speed" name="scale" checked>
        <span>Speed</span>
      </label>
    <label>
        <input type="radio" class="set-size" name="scale">
        <span>Size</span>
      </label>
    <label>
        <input type="radio" class="set-distance" name="scale">
        <span>Distance</span>
      </label>
  </div>
  <div id="universe" class="scale-stretched">
    <div id="galaxy">
      <div id="solar-system" class="earth">
        <div id="mercury" class="orbit">
          <div class="pos">
            <div class="planet">
              <dl class="infos">
                <dt>Mercury</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="venus" class="orbit">
          <div class="pos">
            <div class="planet">
              <dl class="infos">
                <dt>Venus</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="earth" class="orbit">
          <div class="pos">
            <div class="orbit">
              <div class="pos">
                <div class="moon"></div>
              </div>
            </div>
            <div class="planet">
              <dl class="infos">
                <dt>Earth</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="mars" class="orbit">
          <div class="pos">
            <div class="planet">
              <dl class="infos">
                <dt>Mars</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="jupiter" class="orbit">
          <div class="pos">
            <div class="planet">
              <dl class="infos">
                <dt>Jupiter</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="saturn" class="orbit">
          <div class="pos">
            <div class="planet">
              <div class="ring"></div>
              <dl class="infos">
                <dt>Saturn</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="uranus" class="orbit">
          <div class="pos">
            <div class="planet">
              <dl class="infos">
                <dt>Uranus</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="neptune" class="orbit">
          <div class="pos">
            <div class="planet">
              <dl class="infos">
                <dt>Neptune</dt>
                <dd><span></span></dd>
              </dl>
            </div>
          </div>
        </div>
        <div id="sun">
          <dl class="infos">
            <dt>Sun</dt>
            <dd><span></span></dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<script>

$(window).load(function() {

  var body = $("body"),
    universe = $("#universe"),
    solarsys = $("#solar-system");

  var init = function() {
    body.removeClass('view-2D opening').addClass("view-3D").delay(2000).queue(function() {
      $(this).removeClass('hide-UI').addClass("set-speed");
      $(this).dequeue();
    });
  };

  var setView = function(view) {
    universe.removeClass().addClass(view);
  };

  $("#toggle-data").click(function(e) {
    body.toggleClass("data-open data-close");
    e.preventDefault();
  });

  $("#toggle-controls").click(function(e) {
    body.toggleClass("controls-open controls-close");
    e.preventDefault();
  });

  $("#data a").click(function(e) {
    var ref = $(this).attr("class");
    solarsys.removeClass().addClass(ref);
    $(this).parent().find('a').removeClass('active');
    $(this).addClass('active');
    e.preventDefault();
  });

  $(".set-view").click(function() {
    body.toggleClass("view-3D view-2D");
  });
  $(".set-zoom").click(function() {
    body.toggleClass("zoom-large zoom-close");
  });
  $(".set-speed").click(function() {
    setView("scale-stretched set-speed");
  });
  $(".set-size").click(function() {
    setView("scale-s set-size");
  });
  $(".set-distance").click(function() {
    setView("scale-d set-distance");
  });

  init();

});


  </script>
 </body>
</html>
